﻿<%@ Page Title="My Meal Plans" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="MyMealPlan.aspx.cs" Inherits="MyMealPlan" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<script>
    var paging = '<%=ConfigurationManager.AppSettings["paging"].ToString() %>';
    var userid = '<%=Session["Userid"]%>';
    var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    });

    function GetRecords() {
        pageIndex++;
        if (pageIndex >= 2) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetMealPlanPaging",
                data: "{'MealPlanId':'0','UserId':'" + userid + "','page_no':'" + pageIndex + "','page_lenght':'" + paging + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlans(response,true);
                },
                error: function (msg) {
                    //alert('Connect to database is break. Please check connection info!'); 
                }
            });
        }
    }

    
</script>

<script type="text/javascript">
    $(document).ready(function () {
        document.getElementById("<%=GroceryRecipe.ClientID %>").value = '';
        loadMealPlan(userid);
        BindSuggestion(userid);
    });

    function SearchMealPlan(userid) {
            $.ajax({
                type: "POST",
                url: "PIMService.asmx/GetMealPlanByName",
                data: "{'MealPlanName':'" + $("#inPutSearch").val() + "','UserId':'" + userid + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlans(response,false);
                }
            });
        return false;
    }

    function BindSuggestion() {
        if (userid == "") userid = '0';
        $.ajax({
            type: "POST",
            url: "PIMService.asmx/GetMealPlan",
            data: "{'MealPlanId':'0','UserId':" + userid + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var availableTags = '';
                var object = response.d;
                for (var i = 0; i < object.length; i++) {
                    var varObjectNameFull;
                    varObjectNameFull = object[i].MealPlanName;

                    var Sugges = varObjectNameFull;
                    availableTags += Sugges + ",";
                }
                availableTags = availableTags.substring(0, availableTags.length - 1);

                var suggestion = availableTags.split(',');
                $(".suggest").autocomplete({
                    source: suggestion
                });
            }
        });
    }

    function ViewMealPlanFullView(mealPlanToView) {
        self.location = "MealPlanDetails.aspx?MealPlanId=" + mealPlanToView + "";
    }

    function loadMealPlan(userid) {
        document.getElementById("cGrocery").value = '0';
        $.ajax({
            type: "POST",
            url: "PIMService.asmx/GetMealPlanPaging",
            data: "{'MealPlanId':'0','UserId':'" + userid + "','page_no':'" + pageIndex + "','page_lenght':'" + paging + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                BindMeaPlans(response,true);
            },
            error: function (msg) {
            }
        });

    }
    function AddMyGrocery(MealPlanId) {
        $.ajax({
            type: "POST",
            url: "PIMService.asmx/GetRecipeUserIDByMealPlan",
            data: "{'MealPlanId':'" + MealPlanId + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                document.getElementById("<%=GroceryRecipe.ClientID %>").value += response.d;
            },
            error: function (msg) {
            }
        });
        $("#gallery li#" + MealPlanId).remove();
        $("#groceryCounter").show();
        var count = parseInt(document.getElementById("cGrocery").value, 10) + 1;
        if( count > 1 )
            $('#countGrocery').html(count.toString() + '<br/>Meal plans');
        else
            $('#countGrocery').html(count.toString() + '<br/>Meal plan');
        document.getElementById("cGrocery").value = count.toString();

    }

    function BindMeaPlans(response, check) {
        var mealPlan = response.d;
        var html = '';
        var userid = '<%=Session["Userid"]%>';
        if (mealPlan.length > 0) {
            for (var i = 0; i < mealPlan.length; i++) {
                var varObjectID = mealPlan[i].MealPlanID;
                var OldUser = mealPlan[i].UserID
                var varObjectName;
                var varObjectNameFull;
                if (mealPlan[i].MealPlanName != null) {
                    //                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10) + ' ..';
                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10);

                    varObjectNameFull = mealPlan[i].MealPlanName;
                    if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
                }
                else {
                    varObjectName = 'No Name..';
                    varObjectNameFull = 'No Name';
                }
                var varObjectImage = mealPlan[i].MealPlanPhoto;
                var rating = mealPlan[i].MealPlanRating;
                rating = "'" + rating + "'";
                html += '<li id="' + varObjectID + '"  >'
                html += '<img class="image-recipe" src="../' + varObjectImage + '" onclick="ViewMealPlanFullView(' + varObjectID + ')">';
                html += '<div class="iconAdd" onclick="javascript:AddMyGrocery(' + varObjectID + ')">'
                html += '<img class="imgIcon"  src="images/icon-add.png"/>'
                html += '</div>'
                html += '<div class="recipeName"><p style="padding:3px 0">' + varObjectNameFull + '</p></div>'
                html += '</li>'
            }
            if (check)
                $('#gallery').append(html);
            else
                $('#gallery').html(html);
        }
        $("#loader").hide();
    }


    function BindMeaPlan(response,check) {
        var mealPlan = response.d;
        var html = '';
        if (mealPlan.length > 0) {
            for (var i = 0; i < mealPlan.length; i++) {
                var varObjectID = mealPlan[i].MealPlanID;
                var varObjectName;
                var varObjectNameFull;
                if (mealPlan[i].MealPlanName != null) {
                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10);

                    varObjectNameFull = mealPlan[i].MealPlanName;
                    if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
                }
                else {
                    varObjectName = 'No Name..';
                    varObjectNameFull = 'No Name';
                }
                var varObjectImage = mealPlan[i].MealPlanPhoto;
                var rating = mealPlan[i].MealPlanRating;
                rating = "'" + rating + "'";
                html += '<li id="' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image" >'
                html += '<a id="' + varObjectID + ' class="none-decoration" "href="MealPlanDetails.aspx?MealPlanId=' + varObjectID + '" onclick="ViewMealPlanFullView(' + varObjectID + ')">' + varObjectName + '</a>';
                html += '<img class="tooltip" id="' + varObjectID + '" height="72" width="88" alt="' + varObjectNameFull + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" style="display: inline-block; height: 72px;"  onclick="ViewMealPlanFullView(' + varObjectID + ')">';
                if (userid != '') {
                    html += '<a onclick="javascript:AddMyGrocery(' + varObjectID + ')" title="Create glocery" class="ui-icon ui-icon-plus" style="float:right"></a>';
                }
                html += '</li>'
            }
            if(check)
                $('#gallery').append(html);
            else
                $('#gallery').html(html);
        }
        $("#loader").hide();
    }

    function searchKeyPress() {
        if ($('#inPutSearch').val().length > 0) {
            $('#btnDelete').show();
        } else {
            $('#btnDelete').hide();
        }
    }

    function deleteTextSearch() {
        $('#inPutSearch').val('');
    }
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div class="searchBox">
        <div class="bgsearch">
            <div class="pd-input">
                <input id="inPutSearch" class="suggest input-search" type="text" name="txtSearchkey"
                    placeholder="Search" onkeyup="searchKeyPress();" autocomplete="on" value="">
                <input id="btnSearch" class="btn-search" type="button" onclick="return SearchMealPlan(userid);">
                <input id="btnDelete" class="btn-delete" onclick="deleteTextSearch(); return false;"
                    type="button">
            </div>
        </div>
    </div>
<section id="bg_content">
	<div class="box01 clearfix">
        <div class="box02">
            <%--<ul class="ulbox">
                
                <li class="li01">--%>
                <div style="float:right;" >
                <asp:ImageButton src="images/icon03.png" ID="btnGrocery" 
                        runat="server" style="cursor:pointer" alt=""
                        onclick="btnGrocery_Click"  CssClass="imgIcon1" />
                        <div id="groceryCounter" style="display:none;">
                            <div class="arrow-up"></div>
                            <div class="count-css1">
                                <label id="countGrocery"></label>
                            </div>
                        </div> 
                </div>
          <%--              </li>
            </ul>--%>
        </div>
    </div>
    <div class="clearfix clear">
    	<ul id="gallery" class="ulimg">

        </ul>
    </div>
    <div id="loader" style="display:none; text-align:center;" >
        <img src="images/loader.gif"/>
    </div>
</section>
<input type="hidden" id="cGrocery"/>
<input id="inputMealPlanId" type="hidden" />
<asp:HiddenField id="GroceryRecipe" runat="server"/>
</asp:Content>

